<script setup lang="ts">
import { getBase, getCustomLogInfo, saveChangeLog } from '@fl/api/order/base'
import { useStoreDict } from '@fl/store/modules/goodHouseDict'

const props = defineProps({
    handleClose: {
        required: true,
        type: Function,
    },
    id: {
        type: String,
    },
    isDisabled: {
        type: Boolean,
    },
})

const dictStore = useStoreDict()
dictStore.init(['zjlx'])
const { getDicts } = storeToRefs(dictStore)

const houseCustom = ref<any[]>([])
const id = ref<string | undefined>('')
const isDisabled = ref<boolean>(false)
const tableKey = ref<number>(Math.random())
const type = ref<string>('')

watch(() => props, (val) => {
    id.value = val.id
    isDisabled.value = val.isDisabled
})
// 取消按钮
function handleCancle() {
    props.handleClose()
}

function changeEvaluateLevel() {
    tableKey.value = Math.random()
}

// 确定按钮
function handleConfirm() {
    if (!houseCustom.value.length) {
        ElMessage.error('至少添加一个购房人')
        return
    }
    const formData = {
        orderId: id.value,
        ordersCustomsList: houseCustom.value,
    }
    saveChangeLog(formData).then((_res) => {
        ElMessage.success('已提交修改，需用户在APP端确认修改')
        props.handleClose()
    })
    // proxy.$refs["formRef"].validate(valid => {
    //     if (valid) {
    //         let formData = { ...form.value }
    //         formData.id = id.value
    //         if (formData.refundMethod == '1') {
    //             oneClickRefund(formData).then(res => {
    //                 proxy.$modal.msgSuccess("取消成功")
    //                 props.handleClose()
    //             })
    //         }
    //         else if (formData.refundMethod == '2') {
    //             cancelOrder(formData).then(res => {
    //                 proxy.$modal.msgSuccess("取消成功")
    //                 props.handleClose()
    //             })
    //         }
    //     }
    // });
}

// 获取订单详情
function getDetails() {
    getBase(id.value).then((response) => {
        houseCustom.value = response.data.houseCustom
    })
}

function getCustomInfo() {
    getCustomLogInfo(id.value).then((response) => {
        const changeAfter = response.data.changeAfter
        const houseCustomarr = JSON.parse(changeAfter)
        houseCustomarr.forEach((h) => {
            houseCustom.value.push({
                gfrxm: h.gfrxm,
                gfrzjhm: h.gfrzjhm,
                gfrzjlx: h.gfrzjlx,
                lxdh: h.lxdh,
            })
        })
        type.value = response.data.state === '2' ? '是' : response.data.state === '1' ? '否' : ''
    })
}

function handleAdd() {
    houseCustom.value.push({
        gfrxm: '',
        gfrzjhm: '',
        gfrzjlx: '1',
        lxdh: '',
    })
}

function handleDel(_row, index) {
    houseCustom.value.splice(index, 1)
}

function getInfo() {
    id.value = props.id
    isDisabled.value = props.isDisabled
    if (props.isDisabled) {
        getCustomInfo()
    }
    else {
        getDetails()
    }
}

onMounted(() => {
    getInfo()
})
</script>

<template>
    <div class="app-container">
        <div class="group">
            <div class="tab-header">
                <div v-if="type.length">
                    <p>购房人是否已确认变更: {{ type }}</p>
                </div>

                <div v-else>
                    <el-button style="float: right;margin-bottom: 10px;"
                               @click="handleAdd"
                    >
                        添加购房人
                    </el-button>
                </div>
            </div>

            <p>购房人信息</p>

            <br>

            <el-table border
                      :data="houseCustom"
                      :header-cell-style="{ 'text-align': 'left' }"
                      :cell-style="{ 'text-align': 'left' }"
                      style="width: 100%"
                      max-height="250"
            >
                <el-table-column prop="gfrxm"
                                 label="姓名"
                >
                    <template #default="scope">
                        <el-input v-model="scope.row.gfrxm"
                                  clearable
                                  :disabled="isDisabled"
                        />
                    </template>
                </el-table-column>

                <el-table-column prop="gfrzjlx"
                                 label="证件类型"
                                 :column-key="String(tableKey)"
                >
                    <template #default="scope">
                        <el-select v-model="scope.row.gfrzjlx"
                                   placeholder="请选择"
                                   style="height: 32px;"
                                   :disabled="true"
                                   @change="changeEvaluateLevel"
                        >
                            <el-option v-for="dict in getDicts.zjlx"
                                       :key="dict.value"
                                       :label="dict.label"
                                       :value="dict.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column prop="gfrzjhm"
                                 label="证件号码"
                >
                    <template #default="scope">
                        <el-input v-model="scope.row.gfrzjhm"
                                  clearable
                                  :disabled="isDisabled"
                        />
                    </template>
                </el-table-column>

                <el-table-column prop="lxdh"
                                 label="手机号"
                >
                    <template #default="scope">
                        <el-input v-model="scope.row.lxdh"
                                  clearable
                                  :disabled="isDisabled"
                        />
                    </template>
                </el-table-column>

                <el-table-column v-if="!type.length"
                                 width="120"
                                 fixed="right"
                                 label="操作"
                                 align="left"
                >
                    <template #default="scope">
                        <el-button link
                                   type="primary"
                                   @click="handleDel(scope.row, scope.$index)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-row v-if="!type.length">
            <div class="dialog-footer">
                <el-button @click="handleCancle">
                    取消
                </el-button>

                <el-button type="primary"
                           @click="handleConfirm"
                >
                    保存
                </el-button>
            </div>
        </el-row>
    </div>
</template>

<style scoped lang="scss">
.group {
    margin-top: 20px;
}
.tab-header {
    margin-bottom: 16px;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}
</style>
